<template>
	<view>
		<cu-custom bgColor="bg-white" isBack="true">
			<block slot="content">订单详情</block>
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<view class="order_status">
				<view class="order_status_a">{{ orderInfo.order_status_text }}</view>
				<view class="order_status_b">{{ orderInfo.pay_status_text }}</view>
			</view>
			<view class="address_a">
				<view class="address_a_a">
					<u-icon name="map" color="#666666" size="16"></u-icon>
				</view>
				<view class="address_a_d">
					{{ orderInfo.consignee }},{{ orderInfo.mobile }},{{ orderInfo.delivery_address }}
				</view>
			</view>
			<view class="index_d">
				<view class="index_d_a" v-for="(item, index) in orderInfo.order_goods" :key="index">
					<view class="index_d_a_a">
						<custom-image :lazy-load="true" width="120rpx" height="120rpx" radius="10rpx" lazy-load
							:src="item.image"></custom-image>
					</view>
					<view class="index_d_a_b">
						<view class="index_d_a_b_a">{{ item.goods_name }}</view>
						<view class="index_d_a_b_b">
							<view class="index_d_a_b_b_a">规格：{{ item.spec_value }}</view>
						</view>
						<view class="index_d_a_b_d">
							<view class="index_d_a_b_d_a" v-if="item.integral_price > 0 && item.goods_price > 0">
								<span>积分</span>{{ item.integral_price }}+<span>¥</span>{{ item.goods_price }}
							</view>
							<view class="index_d_a_b_d_a" v-if="item.integral_price > 0 && item.goods_price <= 0">
								<span>积分</span>{{ item.integral_price }}
							</view>
							<view class="index_d_a_b_d_a" v-if="item.integral_price <= 0 && item.goods_price > 0">
								<span>¥</span>{{ item.goods_price }}
							</view>
							<view class="index_d_a_b_d_b">
								X{{ item.goods_num }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="index_d">
				<view class="confirm_order_a">
					<view class="confirm_order_a_a" v-if="orderInfo.goods_price > 0">
						<view class="confirm_order_a_a_a">商品金额</view>
						<view class="confirm_order_a_a_b">￥{{ orderInfo.goods_price }}</view>
					</view>
					<view class="confirm_order_a_a" v-if="orderInfo.total_integral > 0">
						<view class="confirm_order_a_a_a">所需积分</view>
						<view class="confirm_order_a_a_b">{{ orderInfo.total_integral }}</view>
					</view>
					<view class="confirm_order_a_a" v-if="orderInfo.total_integral > 0">
						<view class="confirm_order_a_a_a">可用积分</view>
						<view class="confirm_order_a_a_b">剩余{{ user_integral }}积分</view>
					</view>
					<view class="confirm_order_a_a">
						<view class="confirm_order_a_a_a">运费</view>
						<view class="confirm_order_a_a_b">￥{{ orderInfo.shipping_price }}</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;height: 160rpx;"></view>
			<view class="index_c">
				<view class="index_c_b">
					<view class="index_c_b_a">积分：</view>

					<view class="index_c_b_b">
						<span>¥</span>{{ orderInfo.total_integral }}
					</view>
				</view>
				<view class="index_c_a" @click="cancelOrder">取消订单</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/common/request.js';
	export default {
		data() {
			return {
				showLoading: true,
				orderInfo: {},
				user_integral: 0,
				orderId: 0
			}
		},
		onLoad(options) {
			this.orderId = options.id;
			this.uid = uni.getStorageSync('uid');
			this.getOrderDetails();
		},
		methods: {
			getOrderDetails() {
				let params = {
					uid: this.uid,
					id: this.orderId
				};
				let opts = {
					url: "o-detail",
					method: "get",
				};
				request.httpRequest(opts, params).then((res) => {
					if (res.data.code === 200) {
						this.orderInfo = res.data.data;
						this.user_integral = res.data.data.user_integral || 0;
						this.showLoading = false;
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
						this.showLoading = false;
					}
				});
			},
			cancelOrder() {
				uni.showModal({
					title: '温馨提示',
					content: '是否确认取消订单',
					confirmColor: '#FF2C3C',
					success: ({
						confirm
					}) => {
						if (confirm) {
							// handle order cancellation
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.coupon_show_a {
		width: 750rpx;
		height: 1000rpx;
	}

	.coupon_show_a_a {
		height: 130rpx;
		line-height: 130rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.coupon_show_a_b {
		height: 800rpx;
		overflow-y: auto;
		width: 670rpx;
		margin: auto;
	}

	.coupon_show_a_b_a {
		width: 670rpx;
		height: 180rpx;
		border-radius: 20rpx;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 670rpx 180rpx;
		margin-top: 20rpx;
	}

	.coupon_show_a_b_a_a {
		float: left;
		width: 160rpx;
		height: 180rpx;
		text-align: center;
		line-height: 180rpx;
		font-size: 48rpx;
		font-family: D-DIN;
		font-weight: bold;
		color: #E71102;
	}

	.coupon_show_a_b_a_a span {
		font-size: 30rpx;
	}

	.coupon_show_a_b_a_b {
		height: 180rpx;
		float: left;
		width: 300rpx;
		margin-left: 30rpx;
	}

	.coupon_show_a_b_a_b_a {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
		margin-top: 35rpx;
	}

	.coupon_show_a_b_a_b_b {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #BBBBBB;
		line-height: 40rpx;
	}

	.coupon_show_a_b_a_b_c {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		line-height: 40rpx;
	}

	.coupon_show_a_b_a_b_c_a {
		float: left;
	}

	.coupon_show_a_b_a_b_c_b {
		float: left;
		margin-left: 5rpx;
		margin-top: 9rpx;
	}

	.coupon_show_a_b_a_c {
		width: 120rpx;
		height: 60rpx;
		background: linear-gradient(139deg, #E71102, #E71102);
		border-radius: 30rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 60rpx;
		text-align: center;
		margin-top: 45rpx;
		margin-left: 30rpx;
		float: left;
	}

	.trip_order_c_a {
		height: 150rpx;
	}

	.trip_order_c_a_a {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 150rpx;
		float: left;
	}

	.trip_order_c_a_b {
		float: right;
		margin-top: 45rpx;
	}

	.trip_order_c_a_c {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #444444;
		line-height: 150rpx;
		float: right;
	}

	.trip_order_c_a_cc {
		color: #000000;
	}

	.trip_order_c_a_c_a {
		float: left;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #E71102;
	}

	.trip_order_c_a_c_b {
		float: left;
	}

	.trip_order_c_a_c_b span {
		color: #E71102;
	}

	.trip_order_c_a_c_c {
		float: left;
		margin-top: 65rpx;
		margin-left: 20rpx;
	}

	.trip_order_c_a_d {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #444444;
		line-height: 150rpx;
		float: right;
	}

	.trip_order_c_a_d input {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 150rpx;
		height: 150rpx;
		text-align: right;
	}



	.address_a {
		width: 710rpx;
		height: auto;
		overflow: hidden;
		background: #FFFFFF;
		padding: 33rpx 23rpx;
		margin: auto;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.address_a_a {
		width: 50rpx;
		height: 50rpx;
		float: left;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 50rpx 50rpx;
	}

	.address_a_b {
		float: left;
		margin-left: 25rpx;
		width: 490rpx;
	}

	.address_a_b_a {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-top: 16rpx;
	}

	.address_a_b_b {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.address_a_c {
		float: right;
		background-position: right;
		background-size: 11rpx 20rpx;
		background-repeat: no-repeat;
		width: 30rpx;
		margin-top: 20rpx;
	}

	.address_a_d {
		overflow: hidden;
		width: 490rpx;
		float: left;
		margin-left: 25rpx;
	}

	.address_a_d_a {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.address_a_d_a span {
		margin-left: 20rpx;
	}

	.address_a_d_b {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.index_c {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		padding: 0 55rpx;
	}

	.index_c_a {
		width: 195rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #E71102, #E71102);
		border-radius: 40rpx;
		margin-top: 20rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		float: right;
	}

	.index_c_b {
		float: left;
		line-height: 120rpx;
	}

	.index_c_b_a {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		float: left;
	}

	.index_c_b_b {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #E71102;
		float: left;
	}

	.index_c_b_b span {
		font-size: 24rpx;
	}

	.confirm_order_a {
		width: 700rpx;
		height: auto;
		padding: 0rpx 30rpx;
		margin: auto;
	}

	.confirm_order_a_a {
		height: 80rpx;
		line-height: 80rpx;
	}

	.confirm_order_a_a_a {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #222222;
		float: left;
	}

	.confirm_order_a_a_b {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		float: right;
	}

	.confirm_order_a_b {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		height: 120rpx;
		line-height: 120rpx;
	}

	.confirm_order_a_b_a {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		text-align: right;
	}

	.confirm_order_a_b_a span {
		font-size: 28rpx;
		color: #222222;
	}

	.confirm_order_b {
		height: 106rpx;
		line-height: 106rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		width: 710rpx;
		margin: auto;
	}

	.confirm_order_b span {
		color: #E71102;
	}

	.confirm_order_b_a {
		float: left;
		width: 33.33%;
	}

	.index_d {
		width: 710rpx;
		margin: auto;
		height: auto;
		background-color: #FFFFFF;
		margin-top: 20rpx;
	}

	.index_d_a {
		width: 700rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 20rpx 30rpx;
		overflow: hidden;
	}

	.index_d_a_a {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		overflow: hidden;
		float: left;
	}

	.index_d_a_b {
		width: 470rpx;
		height: auto;
		float: left;
		position: relative;
		margin-left: 40rpx;
	}

	.index_d_a_b_a {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.index_d_a_b_b {
		margin-top: 10rpx;
		overflow: hidden;
	}

	.index_d_a_b_b_a {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #CCCCCC;
		float: left;
		line-height: 42rpx;
	}

	.index_d_a_b_d {
		overflow: hidden;
	}

	.index_d_a_b_d_a {
		float: left;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #E71102
	}

	.index_d_a_b_d_a span {
		font-size: 24rpx;
	}

	.index_d_a_b_d_b {
		float: right;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
		line-height: 50rpx;
	}

	.index_d_a_b_b_b {
		float: left;
	}

	.index_d_a_b_b_b_a {
		background: #FFFFFF;
		border: 1px solid #E5E5E5;
		border-radius: 5px;
		height: 42rpx;
		line-height: 42rpx;
		padding: 0 10rpx;
		float: left;
		margin-left: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #E71102;
	}

	.index_d_a_b_c {
		width: 44rpx;
		height: 44rpx;
		background-color: #E5E5E5;
		border-radius: 50%;
		position: absolute;
		right: -20rpx;
		top: 0rpx;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 21rpx 15rpx;
	}

	.index_d_a_b_cc {
		background-color: #24C68B;
	}
</style>